<template>
    <div class="my-friend-list-container">
        <div class="bac-container-none-padding">
            <div class="col-right-top">
                <span class="top-title">
                    我的关注
                </span>

                <!--搜索条件-->
                <div class="filter-min-box">
                    <div class="left">
                     <span v-if="!batch">
                        <span>
                            <el-link :underline="false" @click="openBatch">批量管理</el-link>
                        </span>
                        <span>
                            <el-dropdown>
                              <span class="el-dropdown-link">
                                   <el-link :underline="false">排序<i
                                           class="el-icon-arrow-down  el-icon--right"></i></el-link>
                              </span>
                                <el-dropdown-menu slot="dropdown" class="mini-dropdown-menu">
                                    <el-dropdown-item v-for="(item,index) in sortList" :key="item.code">{{item.name}}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </span>
                    </span>

                        <span v-if="batch" class="batch-container">
                        <span>
                            <el-button size="mini" plain @click="batchDeleteConcern">取消关注</el-button>
                        </span>
                        <span>
                            <el-button size="mini" plain @click="batchAll">全选</el-button>
                        </span>
                        <span>
                            <el-button size="mini" plain @click="openBatch">退出</el-button>
                        </span>
                        <span>
                            <el-link type="primary" :underline="false">已选{{batchList.length}}人</el-link>
                        </span>
                        <span>
                            <el-link type="primary" :underline="false" @click="batchCancel">取消选择</el-link>
                        </span>

                    </span>
                    </div>

                    <span class="right">
                    <el-input type="text" placeholder="搜索名称/公司名/标签/职务" class="name-input" size="mini"
                              v-model="params.likeStr" @keyup.enter.native="paramsChange"></el-input>
                        <el-button type="primary" size="mini" @click="paramsChange" >搜索</el-button>
                </span>
                </div>
            </div>
        </div>
        <div class="bac-container-none-padding">
            <ul class="user-list-small" v-infinite-scroll="load" >
                <li v-for="(user,index) in userList" :key="index" class="user-item">
                    <el-card shadow="hover">
                        <el-row>
                            <el-col :span="3" class="user-avatar">
                                <div @click="openHome(user.userId)">
                                    <el-avatar :size="40" :src="user.headUrl"></el-avatar>
                                </div>
                            </el-col>
                            <el-col :span="20" class="user-data">
                                <div class="user-name" @click="openHome(user.userId)"><span>{{user.realName}}</span>
                                    &nbsp;
                                    <el-tag type="danger" size="mini" effect="plain" v-if="user.type == 1">v</el-tag>
                                    <el-tag type="danger" size="mini" effect="plain" v-if="user.creditLevel == 1">实名
                                    </el-tag>
                                </div>
                                <ul class="user-data-item">
                                    <li v-if="user.subCategoryName != null && user.parentCategoryName != null">
                                        <span>行业：</span>
                                        <el-link :underline="false">{{user.subCategoryName == null ?
                                            user.subCategoryName : user.parentCategoryName}}
                                        </el-link>
                                    </li>
                                    <li v-if="user.cityName != null">
                                        <span>城市：</span>
                                        <el-link :underline="false">{{user.cityName}}</el-link>
                                    </li>
                                    <li v-if="user.profession != null">
                                        <span>职位：</span>
                                        <el-link :underline="false" @click="setLikeStr(user.profession)">
                                            {{user.profession}}
                                        </el-link>
                                    </li>
                                </ul>
                                <ul class="user-data-item" v-if="user.company != null">
                                    <li>
                                        <span>公司：</span>
                                        <el-link :underline="false" @click="setLikeStr(user.company)">{{user.company}}
                                        </el-link>
                                    </li>
                                </ul>
                                <div class="user-operate">
                                    <el-button size="mini" plain @click="userConcernDelete(user)">取消关注</el-button>

                                    <el-button size="mini" plain @click="showAddMessage(user)">留言</el-button>
                                </div>

                                <el-checkbox v-model="batchList" :label="user.userId" v-if="batch"
                                             class="batch-checkbox"></el-checkbox>

                            </el-col>
                        </el-row>
                    </el-card>
                </li>

            </ul>
            <div class="empty-container" v-if="userList.length == 0 ">
                <div class="bottom-text">{{loading == false ? '关注为空' : '加载中'}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import util from '@/utils/commonUtil';

    export default {
        data: function () {
            return {
                loadFlag: true,
                loading: false,
                params: {
                    likeStr: "",
                    page: 1,
                    size: 20,
                    count: 0
                },
                headUrl: "./src/assets/images/head-logo.jpg",
                batch: false,//批量管理
                batchList: [],
                sortList: [
                    {
                        code: "",
                        name: "综合"
                    },
                    {
                        code: "dynamic",
                        name: "动态量"
                    },
                    {
                        code: "friend",
                        name: "人脉量"
                    },
                    {
                        code: "fans",
                        name: "粉丝人数"
                    }
                ],
                userList: []
            }
        },
        methods: {
            openBatch() {
                this.batch = !this.batch
            },
            batchAll() {
                this.batchList = [];
                this.userList.forEach(user => {
                    this.batchList.push(user.userId)
                })
            },
            batchCancel() {
                this.batchList = [];
            },
            batchDeleteConcern() {
                if (this.batchList.length == 0) {
                    this.$notify({offset: 60, title: '错误', message: '请选择你要取消关注的用户', type: 'warning'})
                    return;
                }
                this.$confirm('确定取消关注选择的用户吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$post("/user/concern/deleteList", {
                        concernUserIdList: this.batchList
                    }).then(res => {
                        this.loadFlag = true;
                        this.params.page = 1;
                        this.userList = [];
                        this.initData();
                    })
                })
            },
            initData() {
                this.loading = true;
                this.$post("/user/concern/queryFriendPage", this.params).then(res => {
                    if (res.data.rows == null || res.data.rows.length == 0) {
                        this.loadFlag = false;
                        this.loading = false;
                        return;
                    }
                    res.data.rows.forEach(u => {
                        u.userHeadUrl =util.setDefaultHead(u.userHeadUrl);
                    })
                    this.userList = this.userList.concat(res.data.rows);
                    this.params.count = res.data.count;
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            },
            load() {
                if ((this.loadFlag == false && this.params.count == this.userList.length ) || this.loading) {
                    return;
                }
                this.params.page++;
                this.initData();
            }
            ,
            openHome(id) {
                this.$router.push({
                    path: "/home",
                    query: {
                        id: id
                    }
                })
            },
            setLikeStr(likeStr) {
                this.params.likeStr = likeStr;
                this.paramsChange();
            },
            paramsChange() {
                this.params = {
                    page: 1,
                    size: 20,
                    count: 0,
                    likeStr: this.params.likeStr,
                    sortField: this.params.sortField
                }
                this.loadFlag = true;
                this.userList = [];
                this.initData();
            },
            selectOtherParams(c) {
                this.params.sortField = c;
                this.paramsChange();
            },
            userConcernDelete(user) {
                this.$confirm('确定取消关注？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$post("/user/concern/delete", {
                        concernUserId: user.userId
                    }).then(res => {
                        this.userList.splice(user, 1)
                    })
                })
            },
            showAddMessage(user) {
                this.$prompt('', '留言', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    if(value){
                        this.addMessage(user.userId,value);
                    }
                }).catch(() => {

                });
            },
            addMessage(userId, mes) {
                this.$post("/user/message/add", {
                    userId: userId,
                    content: mes
                }).then(res => {
                    this.$message({
                        message: '留言成功',
                        type: 'success',
                        offset:70
                    });
                })
            }
        },
        mounted() {
            this.initData();
        }
    }
</script>

<style>


</style>